<template>
	<view class="page_box">
		<view class="head_box ">
			<yy-custom bgColor="bg-gradual-blue" v-if="0">
				<block slot="backText">返回</block>
				<block slot="content">导航栏</block>
			</yy-custom>
		</view>

		<view class="content_box ">

			<view class="info padding flex  bg-white flex-direction">
				<text class="f30 text-black">产品类型</text>
				<view class="commodity margin-top  flex justify-between flex-wrap">
					<view class="commodity-l flex flex-direction " v-for="(item, index) in commodity" :key="index">
						<view class="flex align-center justify-center" style="width: 340rpx; height: 340rpx;">
							<image :src="item.img" mode="aspectFill" class=" radius"
								style="width: 280rpx; height: 280rpx;"></image>
						</view>

						<text class="f30 text-light margin-top-xs flex justify-center">{{item.name}}</text>
						<!-- <text class="f26 text-gray margin-top-xs flex justify-center">净含量：{{item.size}}</text> -->
						<view class="w100 flex justify-center margin-top-sm"><button
								class="cu-btn btn f28 text-white ">共{{item.repertoryNum}}箱</button></view>
					</view>
				</view>
			</view>
			<view class="submit padding bg-white margin-top ">
				<view class="flex  align-center justify-between">
					<text class="f30 text-black">产品配置</text>
					<view class="flex align-center" @click="show = true">
						<text class="text-gray margin-right-sm">{{ configuration }}</text>
						<text class="cuIcon-triangledownfill " style="font-size: 50rpx;"></text>
					</view>
				</view>
				<view class="flex padding-tb margin-top-sm  ">
					<text class="f30 text-black" style="white-space: nowrap;">原生型</text>
					<view class="wh100  margin-left-xl flex align-center justify-end text-left">
						<input type="text" value="" @input="inputNum(0)" v-model="inputNumm" placeholder="请输入产品数量"
							placeholder-class="ddd" />
					</view>
				</view>
				<view class="flex padding-tb-xs" v-if="configuration == '自由配置'">
					<text class="f30 text-black" style="white-space: nowrap;">复合型</text>
					<view class="wh100  margin-left-xl flex align-center justify-end text-left">
						<input type="text" value="" @input="inputNum(1)" v-model="inputNumm1" placeholder="请输入产品数量"
							placeholder-class="ddd" />
					</view>
				</view>
				<view class="flex margin-top-sm align-center">
					<text class="cuIcon-notice"></text>
					<text class="f26 text-gray margin-left" style="line-height: 1.5;">
						您当前等级最低补货数量需达到{{heshu}}箱 ！
					</text>
				</view>
				<view class="" style="height: 120rpx;"></view>
			</view>
			<view class="margin-top-xl padding-lr padding-tb-xs fixed bg-white  flex align-center justify-between">
				<view class="flex align-center">
					<text class="f26 text-black">合计(箱)：</text>
					<text class="margin-left text-red text-bold">{{num ? num : 0 }}</text>
				</view>
				<button class="cu-btn btn flex align-center justify-center" @tap="addSunm">提交</button>
			</view>
		</view>
		<view class="foot_box">
			<u-action-sheet :list="list" v-model="show" @click="click"></u-action-sheet>
			<u-action-sheet :list="list1" v-model="show1" @click="click1"></u-action-sheet>
		</view>
		<!-- 登录提示 -->
		<yy-login v-if="false"></yy-login>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [{
						text: '自由配置'
					},
					{
						text: '全部为原生型'
					}
				],
				list1: [{
						text: 'A'
					},
					{
						text: 'B'
					},
					{
						text: 'C'
					}
				],
				show: false,
				show1: false,
				configuration: '自由配置', //配置
				gde: 'A', //等级
				id: '',
				commodity: [],
				inputNumm1: '',
				inputNumm: '',
				num: 0,
				obj: {},
				heshu: 0,
				fuhexing: 0,
				yuansheng: 0,
				commodityId: '',
				getListFrom: [],
				getListFrom1: [],
			};
		},
		onShow() {
			// this.$refs.loading.open();
		},
		onLoad(e) {
			this.id = e.id

			this.lvevList()
			this.lvevListFrom()
		},
		methods: {
			jump(url) {
				uni.navigateTo({
					url
				});
			},
			click(e) {
				e ? (this.configuration = '全部为原生型') : (this.configuration = '自由配置');
				// this.heshu = Math.ceil(this.getListFrom[e].indicators / 6)
				this.heshu = this.getListFrom[e].indicators
				this.num = ''
				this.inputNumm1 = ''
				this.inputNumm = ''
			},
			click1(e) {
				e == 0 ? (this.gde = 'A') : e == 1 ? (this.gde = 'B') : (this.gde = 'C');
			},

			inputNum(e) {
				this.num = Number(this.inputNumm1) + Number(this.inputNumm)
			},

			inputNum1(e) {
				this.num += Number(e.detail.value)
			},

			async lvevList() {
				const res = await this.$u.get('/orderindicators/list', {
					level: uni.getStorageSync('data').level,
					kind: 0,
				}, {});
				if (res.code == 0) {
					this.getListFrom = res.data
					this.heshu = res.data[1].indicators
				}
			},

			async lvevListFrom() {
				const res = await this.$u.get('/repertory/' + uni.getStorageSync('data').id, {}, {});
				if (res.code == 0) {
					this.commodity = res.data.repertory
				}
			},

			jump1(url, index) {
				uni.switchTab({
					url:'/pages/invManagement/invManagement'
				});
				
			},

			async addSunm() {

				if (this.inputNumm != '' && this.inputNumm1 != '') {
					var objList = {
						tel: uni.getStorageSync('data').tel,
						id: uni.getStorageSync('data').id,
						order: [{
							commodityId: 1,
							num: Number(this.inputNumm)
						}, {
							commodityId: 2,
							num: Number(this.inputNumm1)
						}]
					}
					const res = await this.$u.post('/order/add', objList, {});
					if (res.code == 0) {
						this.$refs.uToast.show({
							title: '申请补货成功!',
							type: 'success'
						});
						
						var that = this
						
						setTimeout( function() {
							that.jump1()
						},2000)
						
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'none'
						});
					}
					

				} else if (this.inputNumm1 != '') {
					var objList = {
						tel: uni.getStorageSync('data').tel,
						id: uni.getStorageSync('data').id,
						order: [{
							commodityId: 2,
							num: Number(this.inputNumm1)
						}]
					}
					const res = await this.$u.post('/order/add', objList, {});
					if (res.code == 0) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						});
						this.jump1()
					}
					this.$refs.uToast.show({
						title: res.msg,
						type: 'none'
					});
				} else if (this.inputNumm != '') {
					var objList = {
						tel: uni.getStorageSync('data').tel,
						id: uni.getStorageSync('data').id,
						order: [{
							commodityId: 1,
							num: Number(this.inputNumm)
						}]
					}
					const res = await this.$u.post('/order/add', objList, {});
					if (res.code == 0) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						});
						this.jump1()
					}
					
					this.$refs.uToast.show({
						title: res.msg,
						type: 'none'
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page_box {
		background-color: #f7f7f7;
		margin-top: -5rpx;

		.content_box {
			.head {}

			.fixed {
				width: 100vw;
				position: fixed;
				left: 0;
				transform: translateX(-50);
				bottom: 0;
			}

			.info {
				.commodity {
					.commodity-l {
						width: 320rpx;

						.btn {
							width: 240rpx;
							height: 56rpx;
							background: #fbb03b;
							border-radius: 28rpx;
						}
					}
				}
			}

			.btn {
				width: 210rpx;
				height: 66rpx;
				background: #5b8180;
				border-radius: 20rpx;

				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}

			.submit {
				.ddd {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #c2c2c2;
				}

				/deep/input {
					width: 70vw !important;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #232323;
				}
			}
		}
	}
</style>
